<!-- 驾押任务管理 -->
<template>
	<view class="tab-box">
		<!-- 导航 -->
		<view class="tab-menu">
			<view v-for="(item,index) in tabList" :key="index" :class="{'cur':swiperIndex==index,'tab-menu-item':true}"
				@tap="swiperIndex = index">
				<view class="text-box">
					<text class="text short-text">{{item.label}}</text>
					<text class="num short-text" v-show="item.total">{{item.total>99?'99+':item.total}}</text>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<swiper :autoplay="false" :current="swiperIndex" :skip-hidden-item-layout="true" @change="swiperChange"
			v-if="swiperShow">
			<swiper-item v-for="(item, index) in tabList" :key="index">
				<waybill-list v-model="item.total" :tabIndex="index" class="content-box" :type="index"
					v-if="item.isInit"></waybill-list>
			</swiper-item>
		</swiper>

	</view>
</template>
<script>
	import waybillList from '../task/jy_list.vue'
	export default {
		components: {
			waybillList
		},
		data() {
			return {
				swiperShow: true,
				swiperIndex: 0,
				tabList: [{
					label: '全部',
					isInit: true,
					total: 0
				}, {
					label: '审核中',
					isInit: false,
					total: 0
				}, {
					label: '已通过',
					isInit: false,
					total: 0
				}, {
					label: '未通过',
					isInit: false,
					total: 0
				}]
			}
		},
		onLoad() {},
		methods: {
			reload() {
				this.swiperShow = false;
				this.$nextTick(() => {
					this.swiperIndex = 0;
					this.tabList.forEach((item, index) => {
						item.isInit = index == 0;
						item.total = 0;
					});
					this.swiperShow = true;
				})
			},
			swiperChange(event) {
				const index = event.detail.current;
				this.swiperIndex = index;
				this.tabList[index]['isInit'] = true;
			},
			onNavigationBarButtonTap(e) {
				this.$goBack('./create_task?page=1', 2);
			}

		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		.tab-menu {
			background: #fcd95f;
			display: flex;

			.tab-menu-item {
				flex: 1;
				text-align: center;
				padding: 32rpx 0;

				.text-box {
					display: inline-block;
					position: relative;

					.text {
						line-height: 1em;
						font-size: 32rpx;
						display: inline-block;
					}

					.num {
						position: absolute;
						font-weight: normal;
						right: 0;
						top: 0;
						transform: translate(50%, -50%);
						background-color: #f00;
						border-radius: 30rpx;
						font-size: 26rpx;
						line-height: 30rpx;
						min-width: 30rpx;
						color: #FFFFFF;
						box-sizing: border-box;
						padding: 0 6rpx;
					}
				}

				&.cur {
					font-weight: bold;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						width: 32rpx;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						border-bottom: 6rpx solid #333333;
					}
				}
			}
		}

		uni-swiper {
			height: calc(100vh - 96rpx);

			.content-box {
				height: 100%;
				overflow: auto;
			}
		}
	}
</style>
